import { PageContainer } from '@ant-design/pro-components';
import { Button } from 'antd';
import { FC, memo, useEffect, useRef, useState } from 'react';

const Children: FC<{data: number}> = memo(({data}) => {
  console.log('只有当 props 传递的 data 发生变化时，才会重新渲染本函数', data)
  return <>
    <h1>子组件 - {data + 10}</h1>
  </>
});
const MemoWithUseCallBackTest: FC = () => {
  const [data, setData] = useState(1)
  console.log('父组件被渲染')
  return <>
    <h2 onClick={() => setData(prev => prev + 1)}>父组件 - {data}</h2>
    <br />
    <Children data={data} />
  </>
}
export default MemoWithUseCallBackTest;


const EffectTest: FC = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 3000)
    return () => {
      console.log(`当本组件从DOM树中被卸载时，执行本函数`);
    }
  }, []);

  const ref = useRef(null)

  useEffect(() => {
    console.log('count 变化会触发 本副作用函数', ref.current);
    return () => {
      console.log('执行 useEffect 副作用函数前，执行本函数');
    }
  }, [count]);

  return <>
    <h1 ref={ref} className='center text-9xl'>{count}</h1>
  </>
}
// export default EffectTest;

// 闭包陷阱
const ClosureTrap: React.FC = () => {
  const [count, setCount] = useState(0);
  let normalNumber = 2;


  // 不会因为 函数组件重新执行，而重新初始化 ref
  const ref = useRef(0);

  useEffect(() => {
    const id = setInterval(() => {
      // 解决 闭包陷阱
      setCount(prevCount => prevCount + 1);

      // 此处闭包中 获取的 count 一直是 第一次渲染时 count 的内存地址
      // 所以，count 值一直为 0
      console.log(`闭包中 获取的 count值 永远是函数第一次渲染时的值：${count}`);
    }, 1000);
    console.log('useEffect 只在组件初始化时执行一次', count)
    return () => clearInterval(id);
  }, []);

  ref.current++;
  console.log(`
    执行一次setXX，整个函数便执行一次；
    ref.current:${ref.current}, 
    普通变量会被初始化 normalNumber++:${normalNumber++}
  `);

  return <>
    <h1 className='center text-5xl'>{ count }</h1>
  </>
}
// export default ClosureTrap;
